<template>
<div class="page">
    <div class="chartHead">
        <div class="left">航船接待量预测分析</div>
        <div class="right">
            <div class="time">
                <i :class="type=='day'?'on':''" @click="type='day'">日</i>
                <i :class="type=='month'?'on':''" @click="type='month'">月</i>
                <i :class="type=='year'?'on':''" @click="type='year'">年</i>
            </div>
        </div>
    </div>
    <div ref="Statisticalanalysis" class="Statisticalanalysis"></div>
</div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {
            type: 'year',
        }
    },
    mounted() {
        this.getData();
    },
    watch:{
        type(newval,oldval){
            if(newval&&newval!=oldval){
                this.getData();
            }
        }
    },
    methods: {
        getData() {
            this.$http.get('/ueba/mdmtraffic/trafficAnalysis', {
                params: {
                    type: this.type
                }
            }).then(res => {
                if (res.data.code == 0) {
                    this.Statisticalanalysisdata(res.data.data.dataStr, res.data.data.dateStr);
                }
            })
        },
        Statisticalanalysisdata(y, x) {
            let myChart = echarts.init(this.$refs.Statisticalanalysis)
            const option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '7%',
                    bottom: '10%'
                },

                xAxis: [{
                    type: 'category',
                    axisLabel: {
                        color: '#333'
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#53628F'
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#195384',
                            type: "dotted",
                        }
                    },
                    data: x
                }],
                yAxis: [{
                    type: 'value',
                    name: "单位(人)",
                    min: 0,
                    position: 'left',
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 11,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#0a3e98',
                            type: "dotted",
                        }
                    },
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: "#333",
                        }
                    },
                }],
                series: [{
                    name: '预测值',
                    type: 'line',
                    smooth: true, //是否平滑
                    showAllSymbol: true,
                    // symbol: 'image://./static/images/guang-circle.png',
                    symbol: 'circle',
                    symbolSize: 10,
                    lineStyle: {
                        normal: {
                            color: "#7F4CEF",
                        },
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#53628F',
                        }
                    },
                    itemStyle: {
                        color: "#fff",
                        borderColor: "#7F4CEF",
                        borderWidth: 3,
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'RGBA(127, 76, 239, 1)'
                                },
                                {
                                    offset: 1,
                                    color: 'RGBA(127, 76, 239, 0.2)'
                                }
                            ], false),
                            shadowColor: 'RGBA(80, 38, 72, 0.2)',
                            shadowBlur: 20
                        }
                    },
                    data: y
                }]
            }
            myChart.setOption(option)
        }
    }
}
</script>

<style lang="scss" scoped>
.Statisticalanalysis {
    height: 550px;
}

.page {
    background: #fff;
    height: calc(100vh - 120px);
}

.chartHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 32px 0 32px;
    border-bottom: 1px solid #EAEDF1;
    .left{
            font-weight:bold;
            font-size:20px;
        }
    .right {
        width: 120px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .time {
            i {
                display: inline-block;
                width: 55px;
                height: 28px;
                background: #EAEDF1;
                border-radius: 4px;
                font-style: inherit;
                text-align: center;
                line-height: 28px;
                color: #293C73;
                margin: 0 4px;

                &.on {
                    background: #1372FF;
                    color: #fff;
                }
            }
        }
    }
}
</style>
